Nutrition Coaching App and Website
Project Background
The “MyFitnessPal” App is a nutrition based organization focused on fitness of youth. You can break down the concept of health into different categories. These could include physical, mental, emotional, and behavioural health. There are things any person can do to stay healthy in these areas. But as a teenager, there are some things you should pay special attention to. About 65% of all deaths in adults are caused by heart disease, cancer, and stroke. In many cases, these diseases are preventable. Many of the behaviours that cause these diseases begin at a young age. For example, teens who use tobacco are more likely to have heart disease, cancer, or stroke in adulthood.
Research Findings
I conducted user research and received feedback from users that I turned into user personas. One of our user personas, Mark, is a 38-year Lawyer and busy caregiver who enjoys eating all kinds of junk and carb foods. The research revealed that Mark was frustrated by his food eating habits and wanted to focus on his physique a he is young and willing to give up the unhealthy diet. Mark would like to challenge in focusing on his food habits and lose weight and start a healthy eating.
Low-fidelity designs
Wireframes
In this stage I created the first levels of the designs using what I knew about our users and their needs. The heading are clearly listed and separated by categories, there are buttons and icons to represent clearly defined sections, and theirs is place for a carousel that can slide to display more options without including too many on screen at one time. All of these provide a simplified and intuitive means of navigation for the user.
Low-fidelity prototype
In this version, the digital wireframes from the previous step were connected together into working prototype. That meant users were able to interact with each other of the design and test the way it worked. In this example, I demonstrate how the various wireframes that I make up the pages of our design fit together when each element becomes interactive.
Research plan and usability study
My goal was to figure out what difficulties users encountered when trying to complete core tasks in the MyFittnessPal app, such as updating personal info, finding diet plans, food recipes, and tracking progress.
I conducted a remote, unmoderated usability study between June 11-20. I asked 4 participants with updating the app with new diet plans and nutrition advises available and then selecting a diet plan that made me use those items. Each session lasted 20-45 minutes, including the test and interview questions.
Participants were anyone concerned about the amount of food they eat that are unhealthy of more gluten and carb contained. Members of the testing group were from urban, suburban, and rural areas. I tried to include balanced number of male, female, and nonbinary participants, all of whom are aged from 20-55 years old. I presented participants with a series of tasks that had them interact with the core of the app, then had them complete the System Usability Scale. I recorded the sessions and took notes on their progress and feedback, as noted in the notetaking spreadsheet below:
Usability study Insights
Based on data from the study, I identified three areas that needed to be addressed:
Users are confused the calorie count meter, they don’t know how much input to be given for each meal they have. Therefore they needed more clear instructions and guide regarding the calorie count of each food item.
Users needed more information regarding the nutrition guide of each food they have on a daily basis. The wanted to understand the body type, and wanted to consume accordingly. Therefore they needed a detailed plan body type and nutrition guide. Users want to purchase the diet plans so that they could track their weight loss activity. Therefore they needed a free trial period so that they can finalize the plan before choosing one.
High-fidelity designs
High-fidelity Prototype
I then moved from designing to prototyping to create our hi-fi prototype. I connected all of our screens together into a working version that was representative to my final product. Each page of the design reflected the changes I made as a result of usability testing, and working as exactly as the real app would. This is what I represented to the stakeholders and passed off the development team for production.
Accessibility considerations
To ensure that our app was accessible, I included users of assistive technologies such as keyboards and screen readers throughout all stages of the design cycle, including interviews and usability testing. I took their needs and their feedback and incorporated what I learned into my designs in order to provide an inclusive and accessible experience for all.
